<template>
  <div class="gender-wrapper van-cell">
    <div class="gw-left">性别</div>
    <div class="gw-right">
      <span :class="{ active: props.modelValue === 1 }" @click="toggle(1)">男</span>
      <span :class="{ active: props.modelValue === 0 }" @click="toggle(0)">女</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  // gender: number
  modelValue: number
}>()
// const emits = defineEmits(['update:gender'])
const emits = defineEmits(['update:modelValue'])
// const props1 = defineProps<>({
//   gender: {
//     type: Number,
//     default: 0
//   }
// })

const toggle = (item) => {
  // active.value = item
  // emits('update', item)
  emits('update:modelValue', item)
}
</script>

<style lang="scss" scoped>
.gender-wrapper {
  .gw-left {
    width: 80px;
    margin-right: var(--van-field-label-margin-right);
  }
  .gw-right {
    span {
      background-color: #f2f0f0;
      margin-right: 10px;
      padding: 8px 26px;
      border-radius: 5px;
      &.active {
        border: 1px solid var(--cp-primary);
        background-color: #bbe7d5;
      }
    }
  }
}
</style>
